<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>事件对象</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		
		<div id="box"></div>

	</body>
</html>
<script>
	
	var boxDiv = document.getElementById('box');
	boxDiv.onclick = function(e) {
		// 兼容写法, IE下需要通过window.event获取事件对象
		var e = e ? e : window.event;

		// 给元素绑定事件时, 系统会自动创建一个事件对象作为回调函数的参数
		console.log(e);
		// e.screenX 事件在设备屏幕中所处的x方向坐标
		// e.screenY 事件在设备屏幕中所处的y方向坐标
		console.log(e.screenX, e.screenY);

		// e.clientX 事件在浏览器窗口的x方向坐标
		// e.clientY 事件在浏览器窗口的y方向坐标
		console.log(e.clientX, e.clientY);

		// 页面中的坐标
		console.log(e.pageX, e.pageY);

		// 事件触发时所在的元素
		console.log(e.target);

		// 事件当前所在元素
		console.log(e.currentTarget);


	};




</script>